<template>
  <Card size="small" :bordered="false" class="w-4/4 w-full !mt-0 !rounded-lg !p-6px">
    <template #title>
      <div class="flex items-center cursor-pointer" @click="goRoute">
        <div>{{ props.datalist?.name }}</div>
        <ArrowRightOutlined class="ml-10px" />
      </div>
    </template>
    <template #extra>
      <div class="h-32px">
        <a-button
          type="default"
          v-if="props.datalist?.ant && hasPermission(['SYS_ADMIN', 'TENANT_ADMIN'])"
        >
          查看文档
        </a-button>
        <a-button
          type="primary"
          class="ml-10px"
          v-if="props.datalist?.ant && hasPermission(['SYS_ADMIN', 'TENANT_ADMIN'])"
          @click="addDevice"
        >
          添加设备
        </a-button>
      </div>
    </template>

    <div class="flex">
      <div
        class="w-1/3 rounded-lg border-1 py-8px px-15px mr-10px cursor-pointer"
        :class="{
          'bg-red-500/5': index == 0,
          'border-red-500/10': index == 0,
          'bg-blue-500/5': index == 1,
          'border-blue-500/10': index == 1,
          'bg-gray-500/5': index == 2,
          'border-gray-500/10': index == 2,
        }"
        v-for="(item, index) in props.datalist?.value"
        :key="index"
      >
        <div class="flex justify-between items-center"
          ><div>{{ item.title }}</div
          ><ArrowRightOutlined
        /></div>
        <div class="text-2xl"> {{ item.num }} </div>
      </div>
    </div>
  </Card>
</template>
<script lang="ts" setup>
  import { Card } from 'ant-design-vue';
  import { ArrowRightOutlined } from '@ant-design/icons-vue';
  import { useGo } from '/@/hooks/web/usePage';
  import { usePermission } from '/@/hooks/web/usePermission';
  const { hasPermission } = usePermission();

  const props = defineProps({
    datalist: {
      type: Object,
    },
  });

  const go = useGo();
  const goRoute = () => {
    switch (props.datalist?.key) {
      case 'device':
        go('/tb-entities/device');
        break;
      case 'alarm':
        go('/tb-alarms/alarm');
        break;
    }
  };
  function addDevice() {
    go({
      name: 'Devices',
      params: {
        action: '添加设备',
        key: '首页',
      },
    });
  }
</script>
